<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>Class: Util</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
    <link type="text/css" rel="stylesheet" href="styles/custom.css">
    <!--[if lt IE 9]>
    <script src="scripts/html5shiv.min.js"></script>
    <script src="scripts/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div style="position:fixed;top:0px;left:0px;"><h1 class="page-title">Class: Util</h1></div>
<div id="main" style="margin-top:77px;">
    





<nav class="classnav scroll-styled">

    <h5><a href="#main" style="color:#000">class : Util</a></h5>
    
        <h5>Members</h5>
        <ul>
        
            <li><a href="#.exports.emptyImageUrl">exports.emptyImageUrl</a></li>
        
        </ul>
    

    

        
            
            
            <h5>Static Methods</h5>
            <ul>
            
            
                <li><a href="#.exports.extend">
            
                exports.extend</a></li>
        
            
            
            
                <li><a href="#.exports.isNil">
            
                exports.isNil</a></li>
        
            
            
            
                <li><a href="#.exports.isNumber">
            
                exports.isNumber</a></li>
        
            
            
            
                <li><a href="#.exports.isInteger">
            
                exports.isInteger</a></li>
        
            
            
            
                <li><a href="#.exports.isObject">
            
                exports.isObject</a></li>
        
            
            
            
                <li><a href="#.exports.isString">
            
                exports.isString</a></li>
        
            
            
            
                <li><a href="#.exports.isFunction">
            
                exports.isFunction</a></li>
        
            
            
            
                <li><a href="#.exports.hasOwn">
            
                exports.hasOwn</a></li>
        
            
            
            
                <li><a href="#.exports.distanceToSegment">
            
                exports.distanceToSegment</a></li>
        
            
            
            
                <li><a href="#.exports.pointInsidePolygon">
            
                exports.pointInsidePolygon</a></li>
        
            
            
            
                <li><a href="#.exports.translateToSVGStyles">
            
                exports.translateToSVGStyles</a></li>
        
            
            
            
                <li><a href="#.exports.getMarkerPathBase64">
            
                exports.getMarkerPathBase64</a></li>
        
            
            
            
                <li><a href="#.exports.getExternalResources">
            
                exports.getExternalResources</a></li>
        
            
            
            
                <li><a href="#.exports.isGradient">
            
                exports.isGradient</a></li>
        
            
            
            
                <li><a href="#.exports.getGradientStamp">
            
                exports.getGradientStamp</a></li>
        
            
            
            
                <li><a href="#.exports.getSymbolStamp">
            
                exports.getSymbolStamp</a></li>
        
            
            
            
                <li><a href="#.exports.lowerSymbolOpacity">
            
                exports.lowerSymbolOpacity</a></li>
        
            
            
            
                <li><a href="#.exports.extendSymbol">
            
                exports.extendSymbol</a></li>
        
            
            
            
                <li><a href="#.requestAnimFrame">
            
                requestAnimFrame</a></li>
        
            
            
            
                <li><a href="#.cancelAnimFrame">
            
                cancelAnimFrame</a></li>
        
            
            
            
                <li><a href="#.exports.parseJSON">
            
                exports.parseJSON</a></li>
        
            
            
            
                <li><a href="#.exports.computeDegree">
            
                exports.computeDegree</a></li>
        
        
            </ul>
        
        <h5>Methods</h5>
        <ul>
        
        </ul>
    

    
</nav>


<section class="classmain">
    


<header>
    
        <h2>Util</h2>
        
            <div class="class-description">Utilities methods used internally. It is static and should not be initiated.</div>
        
    
</header>

<article>
    <div class="container-overview">
    
        

    <!-- <h2>Constructor</h2> -->
    
    <h4 class="name" id="Util"><span class="type-signature"></span>new <a href="#Util">Util</a><span class="signature">()</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/common.js#L5" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/common.js#L5" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#Util" class="improvelink">[link]</a> -->
    </h4>

    
    







<!--  -->





<!-- event properties -->






























<hr>
    
    </div>

    <!--  -->

    

    

     

    

    
        <h3 class="subsection-title">Members</h3>

        
            
<li>
<h4 class="name" id=".exports.emptyImageUrl"><span class="type-signature">(static, constant) </span>exports.emptyImageUrl<span class="type-signature"> :String</span>

<!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/util.js#L361" class="improvelink">[help to improve]</a>
    
    <a href="#.exports.emptyImageUrl" class="improvelink">[link]</a></h4> -->
</li>



<div class="description">
    <pre>Transparent 1X1 gif imagefrom https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/</pre>
</div>



    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">String</span>


        </li>
    </ul>














<hr>
        
    

    
        
                    <h3 class="subsection-title">Static Methods</h3>
                
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.extend"><span class="type-signature">(static) </span><a href="#.exports.extend">exports.extend</a><span class="signature">(dest, &hellip;src)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/common.js#L21" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/common.js#L21" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.extend" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Merges the properties of sources into destination object.
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>dest</code>
                
                    
                    
                    
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            <td class="description last">object to extend</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>src</code>
                
                    
                    
                    
                        <span class="signature-attributes">repeatable</span>
                    
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            <td class="description last">sources</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Object</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.isNil"><span class="type-signature">(static) </span><a href="#.exports.isNil">exports.isNil</a><span class="signature">(obj)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/common.js#L37" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/common.js#L37" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.isNil" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Whether the object is null or undefined.
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>obj</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            <td class="description last">object</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.isNumber"><span class="type-signature">(static) </span><a href="#.exports.isNumber">exports.isNumber</a><span class="signature">(val)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/common.js#L47" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/common.js#L47" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.isNumber" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Whether val is a number and not a NaN.
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>val</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            <td class="description last">val</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.isInteger"><span class="type-signature">(static) </span><a href="#.exports.isInteger">exports.isInteger</a><span class="signature">(n)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/common.js#L57" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/common.js#L57" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.isInteger" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Whether a number is an integer
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>n</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>

            

            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.isObject"><span class="type-signature">(static) </span><a href="#.exports.isObject">exports.isObject</a><span class="signature">(obj)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/common.js#L67" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/common.js#L67" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.isObject" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Whether the obj is a javascript object.
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>obj</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            <td class="description last">object</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.isString"><span class="type-signature">(static) </span><a href="#.exports.isString">exports.isString</a><span class="signature">(obj)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/common.js#L77" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/common.js#L77" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.isString" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Check whether the object is a string
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>obj</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.isFunction"><span class="type-signature">(static) </span><a href="#.exports.isFunction">exports.isFunction</a><span class="signature">(obj)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/common.js#L90" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/common.js#L90" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.isFunction" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Check whether the object is a function
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>obj</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.hasOwn"><span class="type-signature">(static) </span><a href="#.exports.hasOwn">exports.hasOwn</a><span class="signature">(obj, key)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/common.js#L105" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/common.js#L105" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.hasOwn" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Check whether the object owns the property.
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>obj</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            <td class="description last">object</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>key</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">String</span>


            
            </td>

            

            <td class="description last">property</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.distanceToSegment"><span class="type-signature">(static) </span><a href="#.exports.distanceToSegment">exports.distanceToSegment</a><span class="signature">(p, p1, p2)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/path.js#L135" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/path.js#L135" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.distanceToSegment" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    caculate the distance from a point to a segment.
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>p</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Point.html">Point</a></span>


            
            </td>

            

            <td class="description last"></td>
        </tr>

    

        <tr>
            
                <td class="name"><code>p1</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Point.html">Point</a></span>


            
            </td>

            

            <td class="description last"></td>
        </tr>

    

        <tr>
            
                <td class="name"><code>p2</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Point.html">Point</a></span>


            
            </td>

            

            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Number</span>:

        
<!-- <div class="param-desc"> -->
    distance from p to (p1, p2)
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.pointInsidePolygon"><span class="type-signature">(static) </span><a href="#.exports.pointInsidePolygon">exports.pointInsidePolygon</a><span class="signature">(p, points)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/path.js#L167" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/path.js#L167" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.pointInsidePolygon" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Whether the coordinate is inside the polygon
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>p</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Polygon.html">Polygon</a></span>


            
            </td>

            

            <td class="description last">polygon</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>points</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Coordinate.html">Coordinate</a></span>


            
            </td>

            

            <td class="description last">coordinate</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.translateToSVGStyles"><span class="type-signature">(static) </span><a href="#.exports.translateToSVGStyles">exports.translateToSVGStyles</a><span class="signature">(s)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/resource.js#L14" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/resource.js#L14" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.translateToSVGStyles" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Translate symbol properties to SVG properties
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>s</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            <td class="description last">object with symbol properties</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Object</span>:

        
<!-- <div class="param-desc"> -->
    object with SVG properties
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.getMarkerPathBase64"><span class="type-signature">(static) </span><a href="#.exports.getMarkerPathBase64">exports.getMarkerPathBase64</a><span class="signature">(symbol)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/resource.js#L41" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/resource.js#L41" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.getMarkerPathBase64" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Get SVG Base64 String from a marker symbol with (markerType : path)
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>symbol</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            <td class="description last">symbol with markerType of path</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">String</span>:

        
<!-- <div class="param-desc"> -->
    SVG Base64 String
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.getExternalResources"><span class="type-signature">(static) </span><a href="#.exports.getExternalResources">exports.getExternalResources</a><span class="signature">(symbol, toAbsolute)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/resource.js#L125" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/resource.js#L125" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.getExternalResources" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Get external resources from the given symbol
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>symbol</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            <td class="description last">symbol</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>toAbsolute</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Boolean</span>


            
            </td>

            

            <td class="description last">whether convert url to aboslute</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Array.&lt;String></span>:

        
<!-- <div class="param-desc"> -->
    - resource urls
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.isGradient"><span class="type-signature">(static) </span><a href="#.exports.isGradient">exports.isGradient</a><span class="signature">(g)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/style.js#L9" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/style.js#L9" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.isGradient" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Whether the color is a gradient
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>g</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            <td class="description last">color to test</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.getGradientStamp"><span class="type-signature">(static) </span><a href="#.exports.getGradientStamp">exports.getGradientStamp</a><span class="signature">(g)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/style.js#L19" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/style.js#L19" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.getGradientStamp" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Get stamp of a gradient color object.
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>g</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            <td class="description last">gradient color object</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">String</span>:

        
<!-- <div class="param-desc"> -->
    gradient stamp
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.getSymbolStamp"><span class="type-signature">(static) </span><a href="#.exports.getSymbolStamp">exports.getSymbolStamp</a><span class="signature">(symbol)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/style.js#L40" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/style.js#L40" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.getSymbolStamp" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Get stamp of a symbol
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>symbol</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>
|

<span class="param-type">Array.&lt;Object></span>


            
            </td>

            

            <td class="description last">symbol</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">String</span>:

        
<!-- <div class="param-desc"> -->
    symbol's stamp
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.lowerSymbolOpacity"><span class="type-signature">(static) </span><a href="#.exports.lowerSymbolOpacity">exports.lowerSymbolOpacity</a><span class="signature">(symbol, ratio)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/style.js#L69" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/style.js#L69" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.lowerSymbolOpacity" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Reduce opacity of the color by ratio
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>symbol</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>
|

<span class="param-type">Array.&lt;Object></span>


            
            </td>

            

            <td class="description last">symbols to set</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>ratio</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>

            

            <td class="description last">ratio of opacity to reduce</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Object|Array.&lt;Object></span>:

        
<!-- <div class="param-desc"> -->
    new symbol or symbols
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.extendSymbol"><span class="type-signature">(static) </span><a href="#.exports.extendSymbol">exports.extendSymbol</a><span class="signature">(symbol, &hellip;src)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/style.js#L100" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/style.js#L100" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.extendSymbol" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Merges the properties of sources into the symbol. <br>
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>symbol</code>
                
                    
                    
                    
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>
|

<span class="param-type">Array.&lt;Object></span>


            
            </td>

            

            <td class="description last">symbol to extend</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>src</code>
                
                    
                    
                    
                        <span class="signature-attributes">repeatable</span>
                    
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            <td class="description last">sources</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Object|Array.&lt;Object></span>:

        
<!-- <div class="param-desc"> -->
    merged symbol
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".requestAnimFrame"><span class="type-signature">(static) </span><a href="#.requestAnimFrame">requestAnimFrame</a><span class="signature">(fn)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/util.js#L43" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/util.js#L43" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.requestAnimFrame" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Polyfill of RequestAnimationFrame
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>fn</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">function</span>


            
            </td>

            

            <td class="description last">callback</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Number</span>:

        
<!-- <div class="param-desc"> -->
    request id
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".cancelAnimFrame"><span class="type-signature">(static) </span><a href="#.cancelAnimFrame">cancelAnimFrame</a><span class="signature">(request)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/util.js#L52" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/util.js#L52" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.cancelAnimFrame" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Polyfill of cancelAnimationFrame
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>request</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>

            

            <td class="description last">id</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->






























<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.parseJSON"><span class="type-signature">(static) </span><a href="#.exports.parseJSON">exports.parseJSON</a><span class="signature">(str)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/util.js#L100" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/util.js#L100" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.parseJSON" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Parse a JSON string to a object
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>str</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">String</span>


            
            </td>

            

            <td class="description last">a JSON string</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Object</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id=".exports.computeDegree"><span class="type-signature">(static) </span><a href="#.exports.computeDegree">exports.computeDegree</a><span class="signature">(p1, p2)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/util.js#L349" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/util/util.js#L349" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#.exports.computeDegree" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Compute degree bewteen 2 points.
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>p1</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Point.html">Point</a></span>


            
            </td>

            

            <td class="description last">point 1</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>p2</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Point.html">Point</a></span>


            
            </td>

            

            <td class="description last">point 2</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Number</span>:

        
<!-- <div class="param-desc"> -->
    degree between 2 points
<!-- </div> -->



    


<hr>
        

        
    

    

    
</article>

</section>




</div>

<nav class="page-nav">
    <h2><a href="index.html">V0.47.0</a></h2><h4>Classes</h4><ul></ul><h5>Map</h5><ul><li><a href="Map.html">Map</a></li></ul><h5>Layer</h5><ul><li><a href="Layer.html">Layer</a></li><li><a href="TileSystem.html">TileSystem</a></li><li><a href="TileLayer.html">TileLayer</a></li><li><a href="GroupTileLayer.html">GroupTileLayer</a></li><li><a href="WMSTileLayer.html">WMSTileLayer</a></li><li><a href="OverlayLayer.html">OverlayLayer</a></li><li><a href="VectorLayer.html">VectorLayer</a></li><li><a href="CanvasLayer.html">CanvasLayer</a></li><li><a href="ParticleLayer.html">ParticleLayer</a></li><li><a href="ImageLayer.html">ImageLayer</a></li></ul><h5>Geometry</h5><ul><li><a href="Geometry.html">Geometry</a></li><li><a href="Path.html">Path</a></li><li><a href="Marker.html">Marker</a></li><li><a href="TextMarker.html">TextMarker</a></li><li><a href="Label.html">Label</a></li><li><a href="TextBox.html">TextBox</a></li><li><a href="Polygon.html">Polygon</a></li><li><a href="LineString.html">LineString</a></li><li><a href="Curve.html">Curve</a></li><li><a href="ArcCurve.html">ArcCurve</a></li><li><a href="QuadBezierCurve.html">QuadBezierCurve</a></li><li><a href="CubicBezierCurve.html">CubicBezierCurve</a></li><li><a href="ConnectorLine.html">ConnectorLine</a></li><li><a href="ArcConnectorLine.html">ArcConnectorLine</a></li><li><a href="Ellipse.html">Ellipse</a></li><li><a href="Circle.html">Circle</a></li><li><a href="Sector.html">Sector</a></li><li><a href="Rectangle.html">Rectangle</a></li><li><a href="GeometryCollection.html">GeometryCollection</a></li><li><a href="MultiGeometry.html">MultiGeometry</a></li><li><a href="MultiPoint.html">MultiPoint</a></li><li><a href="MultiLineString.html">MultiLineString</a></li><li><a href="MultiPolygon.html">MultiPolygon</a></li><li><a href="GeoJSON.html">GeoJSON</a></li><li><a href="GeometryEditor.html">GeometryEditor</a></li></ul><h5>Basic types</h5><ul><li><a href="Coordinate.html">Coordinate</a></li><li><a href="Extent.html">Extent</a></li><li><a href="Point.html">Point</a></li><li><a href="PointExtent.html">PointExtent</a></li><li><a href="Position.html">Position</a></li><li><a href="Size.html">Size</a></li></ul><h5>Maptool</h5><ul><li><a href="MapTool.html">MapTool</a></li><li><a href="DrawTool.html">DrawTool</a></li><li><a href="DistanceTool.html">DistanceTool</a></li><li><a href="AreaTool.html">AreaTool</a></li></ul><h5>Ui</h5><ul><li><a href="ui.UIComponent.html">ui.UIComponent</a></li><li><a href="ui.UIMarker.html">ui.UIMarker</a></li><li><a href="ui.InfoWindow.html">ui.InfoWindow</a></li><li><a href="ui.ToolTip.html">ui.ToolTip</a></li><li><a href="ui.Menu.html">ui.Menu</a></li></ul><h5>Control</h5><ul><li><a href="control.Control.html">control.Control</a></li><li><a href="control.Zoom.html">control.Zoom</a></li><li><a href="control.LayerSwitcher.html">control.LayerSwitcher</a></li><li><a href="control.Attribution.html">control.Attribution</a></li><li><a href="control.Scale.html">control.Scale</a></li><li><a href="control.Panel.html">control.Panel</a></li><li><a href="control.Toolbar.html">control.Toolbar</a></li><li><a href="control.Overview.html">control.Overview</a></li></ul><h5>Core</h5><ul><li><a href="Ajax.html">Ajax</a></li><li><a href="Class.html">Class</a></li><li><a href="MapboxUtil.html">MapboxUtil</a></li><li><a href="Util.html">Util</a></li><li><a href="DomUtil.html">DomUtil</a></li><li><a href="StringUtil.html">StringUtil</a></li></ul><h5>Animation</h5><ul><li><a href="animation.Easing.html">animation.Easing</a></li><li><a href="animation.Frame.html">animation.Frame</a></li><li><a href="animation.Player.html">animation.Player</a></li><li><a href="animation.Animation.html">animation.Animation</a></li></ul><h5>Geo</h5><ul><li><a href="CRS.html">CRS</a></li><li><a href="measurer.Identity.html">measurer.Identity</a></li><li><a href="measurer.DEFAULT.html">measurer.DEFAULT</a></li><li><a href="measurer.Measurer.html">measurer.Measurer</a></li><li><a href="measurer.WGS84Sphere.html">measurer.WGS84Sphere</a></li><li><a href="measurer.BaiduSphere.html">measurer.BaiduSphere</a></li><li><a href="projection.DEFAULT.html">projection.DEFAULT</a></li><li><a href="projection.BAIDU.html">projection.BAIDU</a></li><li><a href="projection.EPSG3857.html">projection.EPSG3857</a></li><li><a href="projection.EPSG4326.html">projection.EPSG4326</a></li><li><a href="projection.EPSG4490.html">projection.EPSG4490</a></li><li><a href="projection.IDENTITY.html">projection.IDENTITY</a></li><li><a href="Transformation.html">Transformation</a></li></ul><h5>Handler</h5><ul><li><a href="Handler.html">Handler</a></li><li><a href="DragHandler.html">DragHandler</a></li></ul><h5>Other</h5><ul><li><a href="renderer.CanvasRenderer.html">renderer.CanvasRenderer</a></li></ul><h4>Namespaces</h4><ul><li><a href="measurer.html">measurer</a></li><li><a href="projection.html">projection</a></li><li><a href="renderer.html">renderer</a></li></ul><h4>Mixins</h4><ul><li><a href="Eventable.html">Eventable</a></li><li><a href="JSONAble.html">JSONAble</a></li><li><a href="measurer.Common.html">measurer.Common</a></li><li><a href="projection.Common.html">projection.Common</a></li><li><a href="Handlerable.html">Handlerable</a></li><li><a href="CenterMixin.html">CenterMixin</a></li><li><a href="TextEditable.html">TextEditable</a></li><li><a href="Renderable.html">Renderable</a></li><li><a href="ui.Menuable.html">ui.Menuable</a></li></ul><h3>Global</h3><ul><li><a href="global.html#INTERNAL_LAYER_PREFIX">INTERNAL_LAYER_PREFIX</a></li><li><a href="global.html#RESOURCE_PROPERTIES">RESOURCE_PROPERTIES</a></li><li><a href="global.html#RESOURCE_SIZE_PROPERTIES">RESOURCE_SIZE_PROPERTIES</a></li><li><a href="global.html#NUMERICAL_PROPERTIES">NUMERICAL_PROPERTIES</a></li><li><a href="global.html#COLOR_PROPERTIES">COLOR_PROPERTIES</a></li><li><a href="global.html#getListeningEvents">getListeningEvents</a></li><li><a href="global.html#isEmpty">isEmpty</a></li><li><a href="global.html#IS_NODE">IS_NODE</a></li><li><a href="global.html#identity">identity</a></li><li><a href="global.html#copy">copy</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#add">add</a></li><li><a href="global.html#subtract">subtract</a></li><li><a href="global.html#length">length</a></li><li><a href="global.html#normalize">normalize</a></li><li><a href="global.html#dot">dot</a></li><li><a href="global.html#scale">scale</a></li><li><a href="global.html#cross">cross</a></li><li><a href="global.html#distance">distance</a></li><li><a href="global.html#transformMat4">transformMat4</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Tue Feb 18 2020 16:21:05 GMT+0800 (GMT+08:00)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>

</body>
</html>